﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:sdkctrls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Tag="Layout - MSDN GridSplitter Layout">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="500" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0">

            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Row="0" Grid.Column="0" 
                      Background="Blue"/>
                <StackPanel Grid.Row="0" Grid.Column="1" 
                      Background="DarkGreen"/>
                <StackPanel Grid.Row="0" Grid.Column="2" 
                      Background="Tan"/>

                <StackPanel Grid.Row="1" Grid.Column="0" 
                      Background="Tan"/>
                <StackPanel Grid.Row="1" Grid.Column="1" 
                      Background="Brown"/>
                <StackPanel Grid.Row="1" Grid.Column="2" 
                      Background="Blue"/>

                <StackPanel Grid.Row="2" Grid.Column="0" 
                      Background="DarkGreen"/>
                <StackPanel Grid.Row="2" Grid.Column="1" 
                      Background="Blue"/>
                <StackPanel Grid.Row="2" Grid.Column="2" 
                      Background="Tan"/>

                <sdkctrls:GridSplitter Grid.Row="1" 
                        Grid.ColumnSpan="3" 
                        HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        Height="5"/>

                <sdkctrls:GridSplitter Grid.Column="1" 
                        Grid.RowSpan="3" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        Width="5"/>
            </Grid>

            <TextBlock TextWrapping="Wrap" 
                Margin="30" Foreground="Blue" Height="160"
                ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <Run FontSize="12" FontWeight="Bold">
                    GridSplitter That Overlays Grid:
                    </Run>
                    This example shows Grid with 3 rows and 3 columns
                    and 2 GridSplitters that overlay a small portion of
                    the row(s) or column(s) to which they are assigned.
                    For this reason, it is important to apply the
                    GridSplitter controls after the content of the Grid is
                    defined. The horizontal GridSplitter resizes the first
                    and second rows. The HorizontalAlignment property for
                    this GridSplitter is set to "Stretch" and the
                    VerticalAlignment property is set to "Top". If the
                    VerticalAlignment property was set to "Bottom" instead,
                    the GridSplitter would resize the second and third rows.
                    The vertical GridSplitter resizes the first and second column
                    in the Grid. The VerticalAlignment property for this GridSplitter
                    is set to "Stretch" and the HorizontalAlignment property is set
                    to "Left". If the HorizontalAlignment property was set to "Right"
                    instead of "Left", the GridSplitter would resize the second
                    and third columns.
            </TextBlock>
        </StackPanel>

        <StackPanel Grid.Row="0" Grid.Column="2">

            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="150"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Row="0" Grid.Column="0" Background="Blue"/>
                <sdkctrls:GridSplitter Grid.Column="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="True"
                        Width="5"
                        />
                <Grid Grid.Row="0" Grid.Column="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="50*" />
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
                    <sdkctrls:GridSplitter Grid.Row="1"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          Background="Black" 
                          ShowsPreview="True"
                          Height="5"
                       />
                    <StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>
                </Grid>
            </Grid>

            <TextBlock TextWrapping="Wrap" 
                Margin="30" Foreground="Blue" Height="160"
                ScrollViewer.VerticalScrollBarVisibility="Auto">
                <Run FontSize="12" FontWeight="Bold" >
                GridSplitter as Entire Column or Row:
                </Run>
                This example shows a Grid with three columns and an
                embedded Grid with three rows that is inserted into the
                third column of the parent Grid. The GridSplitters in
                this example occupy the middle column and middle row
                respectively. The vertical GridSplitter is assigned to
                the middle column of the parent Grid with the HorizontalAlignment
                property set to "Center", the VerticalAlignment property
                set to "Stretch" and the Width of the column containing the
                GridSplitter set to "Auto". The horizontal GridSplitter is assigned to
                the middle row in the embedded Grid with the
                HorizontalAlignment property set to "Stretch", the
                VerticalAlignment property set to "Center" and the Height of 
                the row containing the GridSplitter set to "Auto".
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>
